<template>
    <div class="message-content">
      <span v-for="(segment, index) in chunkedContent" 
             :key="index"
             class="content-chunk">
        {{ segment }}
      </span>
    </div>
  </template>
  
  <script lang="ts">
  import { Component,Vue,Watch } from 'vue-property-decorator';
  @Component
  export default class ChatMessage extends Vue {
    // 分块渲染优化
    private chunkSize = 50;
    private chunkBuffer: string[] = [];
  
    get chunkedContent() {
      return this.chunkBuffer;
    }
  
    @Watch('currentMessage')
    onMessageUpdate(newVal: string) {
      if (newVal.length - this.chunkBuffer.join('').length >= this.chunkSize) {
        this.chunkBuffer.push(newVal.slice(this.chunkBuffer.join('').length));
      }
    }
  }
  </script>